<!--
 * @Description: 右侧第二个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-18 17:26:24
-->
<template>
  <div ><div ref="container" style="height:150px"></div></div>
</template>

<script>
import { Pie } from '@antv/g2plot';
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    createPie(){
      const piePlot = new Pie(this.$refs.container, {
  appendPadding: 10,
  data:[ { type: 'pm1', value: 27 },
  { type: 'pm2.5', value: 25 },
  { type: 'pm3.9', value: 18 },
  { type: 'pm10', value: 15 },
  { type: 'pm12', value: 10 },
  //{ type: '其他', value: 5 }
  ],
  angleField: 'value',
  colorField: 'type',
  radius: 0.75,
  label: {
    type: 'spider',
    labelHeight: 28,
    content: '{name}\n{percentage}',
  },
  interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
});

piePlot.render();

    }
  },
  created() {},
  mounted() {this.createPie()},
};
</script>
<style scoped>
</style>